<template>
  <div>
    <!-- 导航区 -->
    <ul class="nav nav-tabs">
      <li>
        <router-link replace
                     class="list-group-item"
                     to="/home/news"
                     active-class="active">News</router-link>
      </li>
      <li>
        <router-link replace
                     class="list-group-item"
                     to="/home/message"
                     active-class="active">Message</router-link>
      </li>
    </ul>
    <!-- 展示区 -->
    <!-- 
        <keep-alive>
        <router-view></router-view>
        </keep-alive> 
    -->
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>
    <!--  
    <keep-alive :include="['News','Message']">
        <router-view></router-view>
    </keep-alive>
    -->
    <!-- <keep-alive :exclude="'News'">
      <router-view></router-view>
    </keep-alive> -->
    <!--
        使用keep-alive 进行路由组件的缓存
        1. 没有属性【include(包括)、exclude(不包括)】：缓存所有被keep-alive包裹的 路由组件
        2. include:
           1. 字符串：组件名，缓存当前组件，其他的组件不缓存
           2. 数组：缓存数组中的组件，其他不缓存
        3. exclude:
           1. 字符串：除了他不缓存，其他都缓存
           2. 数组：数组中的不缓存，其他缓存
    -->
  </div>
</template>

<script>
export default {
  name: 'home',
  mounted() {
    console.log('Home 挂载了')
  },
  beforeDestroy() {
    console.log('Home 卸载了')
  },
}
</script>

<style>
</style>